<template>
  <button @click="random">random</button>
  <div class="box">
    <transition-group move-class="mmm">
      <div class="item" v-for="item in list" :key="item.id">
        {{ item.number }}
      </div>
    </transition-group>
  </div>
</template>
<script setup lang="ts">

// transition-group 组件的平滑过渡动画
// 即当数组列表被被重新排列时，会以平滑过渡动画移动到对应位置
// 在 transition-group 组件中使用 move-class 自定义类名来设置平滑过渡的样式
// 平滑过渡常搭配循环渲染的数组重排，调用 lodash 库的 shuffer 方法重排数组

import { ref } from 'vue'
import _ from 'lodash'
const list = ref(
  Array.apply(null, { length: 81 } as number[]).map((_, index) => {
    return { id: index, number: (index % 9) + 1 }
  })
)
const random = () => {
  list.value = _.shuffle(list.value)
}
console.log(list)
</script>
<style lang="less" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  width: calc(25px * 10 + 9px);
  .item {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
  }
}
.mmm{
  transition: all 1s ease;
}
</style>
